<html>
<head>

<style>
.thead {
	background-color: ivory;
}

.theadcol {
	background-color: pink;
}

.theadcol1 {
	background-color: lightblue;
}

.tbody {
	background-color: snow;
}
</style>
<script type="text/javascript" src="treelist.js">
</script>

<script type="text/javascript">
var ds = {
	header: {
		className: "theader",
		columnClass: "theadcol",
		columns: [{
			innerHTML: "<center>Element</center>",
			className: "theadcol1"
		}, {
			innerHTML: "<b>desc</b>",
			width: 200
		}]
	},
	body: {
		className: "tbody",
		items: [{
			className: "trow",
			cells: [{
				innerHTML: "Root Element"
			}, {
				innerHTML: "This is root element."
			}],
			items: [{
				cells: [{
					innerHTML: "First Element"
				}, {
					innerHTML: "This is first element."
				}]
			}, {
				cells: [{
					innerHTML: "Second Element"
				}, {
					innerHTML: "This is second element."
				}],
				items: [{
					cells: [{
							innerHTML: "First of Second Element"
						}, {
							innerHTML: "This is first element of the second element."
					}]
				}]
			}]
		}, {
			cells: [{
				innerHTML: "<font color='teal'>Comments</font>"
			}, {
				innerHTML: "&nbsp;"
			}]
		}]
	}
};

function page_load() {
	new TreeList("treeList").collapseAll();
}
</script>
</head>

<body onload="page_load()">
<div id="treeList" dataSource="ds">
</div>
</body>
</html>